<template>
    <x-popup v-model="showModal" top="30vh" :auto-hide-tab-bar="autoHideTabBar">
        <view class="selected">
            <view class="item" :class="{ 'value-true': item.id }" v-for="(item, index) in selected" :key="index"
            @tap="clearSelected(index)">{{ item.title }}
            </view>
        </view>
        <view class="regions-data">
            <view class="item" v-for="(data, pinyin_prefix) in viewData" :key="pinyin_prefix">
                <view class="pinyin_prefix padding-left-sm padding-top-sm padding-bottom-sm text-sm text-bold">
                    {{ pinyin_prefix }}</view>
                <view class="grid text-center">
                    <view class="regions-item" v-for="item in data" :key="item.id" @tap="selectedRegions(item)">
                        {{ item.title }}</view>
                </view>
            </view>
        </view>
        <view class="bg-f5f5f7 padding flex flex-direction" v-if="checkStrictly">
			<button class="cu-btn china-btn-bg" @click="eventSelected" :disabled="!selected[0]&&!selected[0].id">确定</button>
        </view>
        <view class="window-bottom"></view>
    </x-popup>
</template>
<script>
export default {
    props: {
        autoHideTabBar: {
            type: Boolean,
            default: false
        },
        checkStrictly: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            showModal: false,
            selected: [
                {
                    title: '省'
                }
            ],
            level:3,
            viewData: [],
            regions: []
        }
    },
    created() {
        this.$utils.$api.Regions.getRegions().then(data => {
            this.regions = data;
            this.setViewData(this.regions);
        }).catch(err => {
            this.$utils.$message.error(err.msg);
        });
    },
    methods: {
        setViewData(data) {
            if(data.length>1){
                let d = {};
                for (let i = 0; i < data.length; i++) {
                    let item = data[i];
                    if (!d[item.pinyin_prefix]) {
                        d[item.pinyin_prefix] = [];
                    }
                    d[item.pinyin_prefix].push({
                        id: item.id,
                        title: item.title,
                        level: item.level,
                        index: i,
                    });
                }
                this.viewData = d;
            }else{
                let itme={
                    id: data[0].id,
                    title: data[0].title,
                    level: data[0].level,
                    index: 0,
                };
                this.selectedRegions(itme);
            }
        },
        show(options) {
            if (options) {
                if(options.level!==undefined){
                    this.level = options.level;
                }
            }
            this.showModal = true;
        },
        hide() {
            this.showModal = false;
        },
        toggle() {
            this.showModal = !this.showModal;
        },
        clearSelected(level){
            this.selected.splice(level);
            let indexArr = this.selected.map(item => {
                if (item.index !== undefined) {
                    return item.index;
                }
            }).filter(item => item !== undefined);
            // 去除undefined
            console.log(indexArr);
            let data = this.regions;
            for (let i = 0; i < indexArr.length; i++) {
                let index = indexArr[i];
                if (data[index].children) {
                    data = data[index].children;
                } else {
                    return this.eventSelected();
                }
            }
            this.selected.push({
                title: this.getLevelText(level)
            });
            this.setViewData(data);
        },
        getLevelText(level) {
            switch (level) {
                case 0:
                    return '省';
                case 1:
                    return '市';
                case 2:
                    return '区';
                case 3:
                    return '街道';
                default:
                    return '';
            }
        },
        selectedRegions(item) {
            this.selected[item.level] = item;
            let indexArr = this.selected.map(item => {
                if (item.index !== undefined) {
                    return item.index;
                }
            }).filter(item => item !== undefined);
            // 去除undefined
            let data = this.regions;
            for (let i = 0; i < indexArr.length; i++) {
                let index = indexArr[i];
                if (data[index].children && data[index].level < this.level) {
                    data = data[index].children;
                } else {
                    return this.eventSelected();
                }
            }
            this.selected.push({
                title: this.getLevelText(item.level + 1)
            });
            this.setViewData(data);
        },
        search(region){
            let data = this.regions;
            for (let i = 0; i < data.length; i++) {
                const provinceItem = data[i];
                if(provinceItem.title.includes(region.province)){
                    this.selected[provinceItem.level] = {
                        id: provinceItem.id,
                        title: provinceItem.title,
                    };
                    for (let j = 0; j < provinceItem.children.length; j++) {
                        const cityItem = provinceItem.children[j];
                        if(cityItem.title.includes(region.city)){
                            this.selected[cityItem.level] = {
                                id: cityItem.id,
                                title: cityItem.title,
                            };
                            for (let k = 0; k < cityItem.children.length; k++) {
                                const areaItem = cityItem.children[k];
                                if(areaItem.title.includes(region.area)){
                                    this.selected[areaItem.level] = {
                                        id: areaItem.id,
                                        title: areaItem.title,
                                    };
                                    for (let l = 0; l < areaItem.children.length; l++) {
                                        const streetItem = areaItem.children[l];
                                        if(streetItem.title.includes(region.street)){
                                            this.selected[streetItem.level] = {
                                                id: streetItem.id,
                                                title: streetItem.title,
                                            };
                                            break;
                                        }
                                    }
                                    break;
                                }
                            }
                            break;
                        }
                    }
                    break;
                }
            }
            this.eventSelected();
        },
        eventSelected() {
            let result = {
                province_id: this.selected[0].id,
                province: this.selected[0].title,
            };
            if (this.selected[1]&&this.selected[1].id) {
                result.city_id = this.selected[1].id;
                result.city = this.selected[1].title;
            }
            if (this.selected[2]&& this.selected[2].id) {
                result.area_id = this.selected[2].id;
                result.area = this.selected[2].title;
            }
            if (this.selected[3]&&this.selected[3].id) {
                result.street_id = this.selected[3].id;
                result.street = this.selected[3].title;
            }
            this.$emit('selected', result);
            this.selected = [
                {
                    title: '省'
                }
            ];
            this.setViewData(this.regions);
            this.hide();
        }
    }
}
</script>
<style lang="scss" scoped>
.selected {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding: 10px;
    border-bottom: 1px solid #eee;
    gap: 10px;

    .item {
        grid-column: span 1;
        font-weight: 600;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .value-true {
        color: var(--theme-color);
    }
}

.regions-data {
    flex: 1;
    overflow: auto;
    background-color: var(--theme-bg-color-light);
}

.window-bottom {
    height: constant(safe-area-inset-bottom) !important;
    height: env(safe-area-inset-bottom) !important;
    background-color: var(--theme-bg-color-light);
}

.pinyin_prefix {
    // 大写
    text-transform: uppercase;
}

.grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    padding: 10px;
}

.regions-item {
    grid-column: span 1;
    background-color: #FFFFFF;
    border-radius: 5px;
    padding: 5px;
    font-size: 24rpx;
    font-weight: 600;
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>